import React from 'react';
import { WeaTop } from 'ecCom';
import { observer } from 'mobx-react';
import classnames from 'classnames';
import AdvancedButton from './AdvancedButton';
import { TopStoreProps } from '../../stores/list/TopStore';

export interface TopProps {
  prefixCls?: string;
  top: TopStoreProps;
  refresh?: () => void;
  onSearch?: (params) => void;
  onSearchChange?: (para) => void;
  isDialog?: boolean;
  loading?: boolean;
  showDropIcon?: boolean;
  dropMenuDatas?: any[];
  onDropMenuClick?: (key: string) => void;
  style?: any;
  buttons: any[] | Function;
  topType?: string;
  onTabChange?: () => void;
  hasQuickSearch?: boolean;
  buttonsAd?: any[];
  searchAd?: any[];
  searchType?: string;
  isInnerTab?: boolean;
  advanced?: boolean;
  title?: string;
  iconInfo:any;
}

@observer
export default class Top extends React.Component<TopProps, any> {
  static AdvancedButton = AdvancedButton;
  changeTabs = (selectedKey) => {
    this.props.top.update({selectedKey});
    this.props.onTabChange && this.props.onTabChange();
  }

  render() {
    const {
      prefixCls = 'coms-mode-top-title',
      top,
      children,
      isDialog = false,
      loading,
      showDropIcon = false,
      dropMenuDatas = [],
      onDropMenuClick,
      style,
      buttons,
      searchType
    } = this.props;
    const {name, title, icon,iconColor,iconBgcolor} = top;
    const classNames = classnames(prefixCls, `${prefixCls}-${searchType}`, {
      [`${prefixCls}-noIcon`]: !icon,
      [`${prefixCls}-dialog`]: isDialog
    });
    return (
      <div
        className={classNames}
        ref="_container"
        style={style}
      >
        {top.isInit && (this.props.isInnerTab ? children :
          <WeaTop
            title={top.title? <span title={top.title}>{name}</span> :name} //这个判断处理头部描述的展示
            icon={<i title={title} className={icon} style={{color:iconColor}} />}
            iconBgcolor={iconBgcolor}
            loading={loading}
            buttons={typeof buttons == 'function' ? buttons(true) : buttons}
            showDropIcon={showDropIcon}
            dropMenuDatas={dropMenuDatas}
            onDropMenuClick={onDropMenuClick}
            buttonSpace={10}
          >
            {children}
          </WeaTop>)
        }
      </div>
    )
  }
}

